<template>
	<!--@touchstart="containerStart" @touchend="containerEnd" @touchmove="containerMove" -->
	<view class="ex-drawer"  style="border: 50rpx;z-index: 10000;">
		<!-- 抽屉 -->
		<view class="ex-drawer-warp" :class="{ move: move }" :style="{ width: `${width}rpx`, left: `-${width}rpx`, transform: `translate3d(${differential}px,0,0)`,backfaceVisibility:`hidden`, }">
			<!-- 抽屉内容插槽 -->
			<slot name="drawerContent"></slot>
			<view  class="openbtn" @click="opneBtn">
				<u-icon :name="maskShow===false?'arrow-right-double':'arrow-left-double'" color="#000" size="24"></u-icon>
			</view>
		</view>
		<!-- 主容器 -->
		<view  class="ex-container-warp" :class="maskShow == true ? 'container prevent' : 'container'" >
			<!-- 遮罩 -->
			<!-- <view v-show="maskShow" class="mask" @tap="close"></view> -->
			<!-- 主容器内容插槽 -->
			<slot name="containerContent"  ></slot>
		</view>
	</view>
</template>

<script setup>
import {
		onMounted,
		destroyed,
		nextTick,
		ref
	} from "vue";	
	let maskShow=ref(false)
	let startX=ref(0)
	let startY=ref(0)
	let moveX=ref(0)
	let moveY=ref(0)
	let startExcursion=ref(0)
	let differential= ref(0)
	let isDirection=ref(null)
	let iswidth= ref(null)
	let move=ref(false)
	const props = defineProps({
	    width: {
	        default: '',
	        type: String,
	    },
		windowWidth:{
			default:'' ,
			type: String,
		}
		
	})	
	const opneBtn=()=>{
		
		if(!maskShow.value){
			move.value = true
			differential.value = uni.upx2px(props.width);	
			if(differential.value == uni.upx2px(props.width) ){
				maskShow.value = true
				iswidth.value=true
			}
			
		}else{
		
				move.value = true
				differential.value = 0;	
				if(differential.value == 0 ){
					maskShow.value = false
					iswidth.value=false
				}
			
		}
	}
	const containerStart=(e) =>{
		isDirection.value = null;
		move.value = false;
		startX.value = e.changedTouches[0].clientX;
		startY.value = e.changedTouches[0].clientY;
		startExcursion.value = this.differential;
	}
	
	const containerMove=(e)=> {
		moveX.value = e.changedTouches[0].clientX;
		moveY.value = e.changedTouches[0].clientY;
		let X = Math.abs(moveX - startX);
		let Y = Math.abs(moveY -startY);
		let differential = startExcursion + moveX -startX;
		differential = Math.min(uni.upx2px(props.width), differential);
		differential = Math.max(0, differential);
		isDirection.value == null ? (isDirection.value = Y / X > Math.sqrt(3) / 3) : ``;
		if (!isDirection.value) {
			differential.value = differential;
			if(differential == 0 ){
				containerEnd()
			}else{
				maskShow.value = true
			}
		}
	}
	
	const containerEnd=()=> {
		if (isDirection.value != null) {
			if (!isDirection.value) {
				iswidth.value = differential > (uni.upx2px(props.width) * 2) / 6;
				differential > 0 && differential < uni.upx2px(props.width) ? (move = true) : ``;
			}
			differential.value = iswidth ? uni.upx2px(props.width) : 0;
			differential.value == 0 ? maskShow.value = false : ``;
		}
	}
	
	const close=()=>{
		if(maskShow.value){
			move.value = true
			differential.value = 0;	
			if(differential.value == 0 ){
				maskShow.value = false
				iswidth.value=false
			}
		}
	}
	const open=()=>{
	
		if(!maskShow.value){
			move.value = true
			differential.value = uni.upx2px(props.width);	
			if(differential.value == uni.upx2px(props.width) ){
				maskShow.value = true
				iswidth.value=true
			}
			
		}
	}
	

</script>

<style>
.ex-drawer {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	
	box-sizing: border-box;
	
}
.ex-drawer-warp {
	position: fixed;
	z-index: 1000;
	touch-action: none;
	width: 100rpx;
	height: 100%;
	background-color: #fff;
	border-right: 16rpx solid rgba(240,248,255, 0.4);
}
.openbtn {
	position: absolute;
	top:50%;
	right: -50rpx;
	width: 50rpx;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	align-items: center;
	background-color: rgba(204,204,204,0.5);
}
.mask {
	position: fixed;
	left: 0rpx;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	background-color:#000000;filter:Alpha(Opacity=60);opacity:0.3;
}
.prevent {
	touch-action: none;
}
.move {
	transition: transform 0.8s ease;
}
</style>
